<template>
  <div class="home">
		 <top title="订单详情"></top>

			<div class="navBg" v-if="systemStr == 'Y' " >
					<h3> 	<img src="@/../static/img/shenqing.png" alt="" />补货拣货</h3>
					<div class="navItems">
							<div class="navBar" v-for="(item, index) in jianhuoY" :key="index" @click="toPage(item.path)" >
									<img :src="item.imgUrl" alt="" />
									<span>{{ item.name }}</span>
							</div>
					</div>
			</div>

			<div class="navBg" v-if="systemStr == 'N' " >
					<h3> 	<img src="@/../static/img/shenqing.png" alt="" />补货拣货</h3>
					<div class="navItems">
							<div class="navBar" v-for="(item, index) in jianhuoN" :key="index" @click="toPage(item.path)" >
									<img :src="item.imgUrl" alt="" />
									<span>{{ item.name }}</span>
							</div>
					</div>
			</div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import top from '@/components/header.vue'//引入封装的组件
import { logout } from '@/utils/auth';

export default {
  name: 'jianhuo',
  components: {
		top
  },
  data() {
    return {
			urlBg: require("@/../static/img/bgcolor.png"),
			imgs: [{ imgUrl: require('@/../static/img/banner.png') }],
			jianhuoY:[
					{ name: '整托拣货', imgUrl: require('@/../static/img/newgoods.png'), path: '/zhengtuojianhuo' },
          { name: '拼托拣货', imgUrl: require('@/../static/img/sqcx.png'), path: '/pintuojianhuo' },
          // { name: '拼托拣货', imgUrl: require('@/../static/img/sqcx.png'), path: '/pintuojianhuo_news' },
					{ name: '整件分拨', imgUrl: require('@/../static/img/tjsq.png'), path: '/zhengjianfenbo' },
					{ name: '拆零分拨', imgUrl: require('@/../static/img/check.png'), path: '/chailinfenbo' },
          { name: '复核商品(冻)', imgUrl: require('@/../static/img/fc2.png'), path: '/fuherongqiDong' },
					{ name: '动态补货', imgUrl: require('@/../static/img/fc2.png'), path: '/dongtaibuhuo' },
					{ name: '容器复核', imgUrl: require('@/../static/img/sqcx.png'), path: '/rongqifuhe' },
					{ name: '集货揽收', imgUrl: require('@/../static/img/fc4.png'), path: '/jihuolanshou' },
					{ name: '集货分发', imgUrl: require('@/../static/img/fc3.png'), path: '/jihuofenfa' },
					{ name: '任务概况', imgUrl: require('@/../static/img/fc4.png'), path: '/renwugaikuang' },
					{ name: '装车', imgUrl: require('@/../static/img/newcj_beifen.png'), path: '/zhuangche' },
					{ name: '拆零还货', imgUrl: require('@/../static/img/fc4.png'), path: '/chailinhuanhuo' },
					{ name: '改拣货数', imgUrl: require('@/../static/img/sqcx.png'), path: '/gaijianhuoshuY' },
					{ name: '改分拨数', imgUrl: require('@/../static/img/sqcx.png'), path: '/gaifenboshuY'},
					{ name: '绑定笼车', imgUrl: require('@/../static/img/tjsq.png'), path: '/bangdinglongche' },
          { name: '门店线路', imgUrl: require('@/../static/img/sqcx.png'), path: '/bocistore' },
          { name: '分拨查询', imgUrl: require('@/../static/img/fc2.png'), path: '/bocifenbocx' },
					{ name: '退出', imgUrl: require('@/../static/img/tcdl.png'), path: '/login' },
			],
			jianhuoN:[
				{ name: '整托拣货', imgUrl: require('@/../static/img/fc1.png'), path: '/zhengtuojianhuoN' },
        // { name: '拼托拣货', imgUrl: require('@/../static/img/sqcx.png'), path: '/pintuojianhuo' },
				{ name: '动态补货', imgUrl: require('@/../static/img/fc2.png'), path: '/dongtaibuhuo'},
				{ name: '静态补货', imgUrl: require('@/../static/img/fc1.png'), path: '/jingtaibuhuo'},
				{ name: '按店拣货', imgUrl: require('@/../static/img/fc2.png'), path: '/storejh'},
				{ name: '笼车拣货', imgUrl: require('@/../static/img/fc1.png'), path: '/longchejianhuo' },
				{ name: '复核容器', imgUrl: require('@/../static/img/fc2.png'), path: '/newsfuherongqi' },
				{ name: '复核商品', imgUrl: require('@/../static/img/sqcx.png'), path: '/fuherongqi' },
				{ name: '拣货集货', imgUrl: require('@/../static/img/fc3.png'), path: '/jianhuojihuo' },
				{ name: '已领拣货', imgUrl: require('@/../static/img/fc4.png'), path: '/yilingjianhuo' },
				{ name: '改拣货数', imgUrl: require('@/../static/img/sqcx.png'), path: '/gaijianhuoshu' },
				{ name: '装车配送', imgUrl: require('@/../static/img/sqcx.png'), path: '/zhuangchepeisong' },
				{ name: '直通拣货', imgUrl: require('@/../static/img/sqcx.png'), path: '/zhitongjianhuo' },
				{ name: '任务概况', imgUrl: require('@/../static/img/fc4.png'), path: '/renwugaikuang' },
				// { name: '装车', imgUrl: require('@/../static/img/newcj_beifen.png'), path: '/zhuangche' },
				{ name: '退出', imgUrl: require('@/../static/img/tcdl.png'), path: '/login' },
			],
			systemStr:'',
		};
  },
  methods: {
    ...mapActions(['clearCache']),
    async toPage(path) {
      if (path === '/login') {
        await logout();
      } else {
        this.$router.push({ path: path });
      }
    },
		changeActive(active){
			console.log(this.active)
			localStorage.setItem('index',this.active);
		},
  },
  mounted() {
    //console.log("-- 可能需要处理功能权限 --");
    var _self = this; var l_hy = this.GWO(true).gUSER;  window.GWO().debug=this;
		console.log("登录返回")
		console.log(window._gwo_.gUSER)
		var lt_ms = new Date(window._gwo_.gUSER.timestamp).getTime() - new Date().getTime();
		if(lt_ms > 60000 || lt_ms < -60000){
			// alert("当前时间存在误差请手动修改本地时间")
		}
		this.systemStr = window.sessionStorage.getItem("system");
		console.log(this.systemStr)
  },
};
</script>

<style lang="scss" scoped>

div.navBg{
	width:94%;
	margin-left:3%;
	margin-right:3%;
	background-color: #fff;
	// border-bottom-right-radius: 10px;
	// border-bottom-left-radius:10px;
	border-radius: 10px;
	margin-bottom: 20px;
	margin-top: 10px;
	h3{
		display: flex;
		align-items: center;
		padding: 13px 0 10px 10px;
		font-size: 18px;
		font-weight: bold;
		color: #505558;
		img{
			width:25px;
			height: 25px;
			margin-right:10px;
		}
	}
	div.navItems{
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		div.navBar{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			margin-bottom: 20px;
			img{
				width: 50px;
				height: 50px;
				margin-bottom: 20px;
			}
			span{
				font-size:13px;
			}
		}
	}
}

div.home{
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	padding-bottom:40px;
	overflow: auto;
}


.navFooter{
	height:65px;
}
</style>
